<template>
  <view class="coupon-center">
    <!-- 导航栏 -->
    <NavBar title="领券中心" />

    <!-- 优惠券列表 -->
    <view class="coupon-content">
      <!-- 空优惠券提示 -->
      <nut-empty v-if="couponList.length === 0" description="暂无可领取的优惠券" image="empty">
        <template #footer>
          <nut-button type="primary" size="small" @click="goShopping">去购物</nut-button>
        </template>
      </nut-empty>

      <!-- 优惠券列表 -->
      <view v-else class="coupon-list">
        <view 
          v-for="(item, index) in couponList" 
          :key="index"
          class="coupon-item"
        >
          <view class="coupon-left">
            <view class="coupon-amount">
              <text class="symbol">¥</text>
              <text class="value">{{ item.amount }}</text>
            </view>
            <view class="coupon-condition">满{{ item.minAmount }}元可用</view>
          </view>
          <view class="coupon-right">
            <view class="coupon-name">{{ item.name }}</view>
            <view class="coupon-scope">{{ item.scope }}</view>
            <view class="coupon-time">{{ item.validTimeDesc }}</view>
            <view class="coupon-btn">
              <nut-button 
                size="small" 
                type="primary" 
                @click.stop="item.received ? goToCouponList() : receiveCoupon(item)"
                :loading="receivingCouponId === item.id"
              >
                {{ item.received ? '已领取' : '立即领取' }}
              </nut-button>
            </view>
          </view>
          <view class="coupon-circle-top"></view>
          <view class="coupon-circle-bottom"></view>
        </view>
      </view>
    </view>

    <!-- 活动规则 -->
    <view class="coupon-rules">
      <view class="rules-title">活动规则</view>
      <view class="rules-content">
        <view class="rule-item">1. 每个优惠券每人限领一张</view>
        <view class="rule-item">2. 优惠券领取后请在有效期内使用</view>
        <view class="rule-item">3. 部分优惠券可能有使用限制，请查看优惠券说明</view>
        <view class="rule-item">4. 最终解释权归本平台所有</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import NavBar from '../../components/NavBar/index.vue'
import userApi from '@/api/user'
import type { CouponItem } from '@/api/types'
import { useLoading } from '../../hooks/useLoading'

// 优惠券列表
const couponList = ref<(CouponItem & { received?: boolean })[]>([])

// 正在领取的优惠券ID
const receivingCouponId = ref<string | number>('')

// 加载状态
const { loading, setLoading } = useLoading()

// 获取优惠券列表
const getCouponList = async () => {
  try {
    setLoading(true)
    
    // 调用API获取可领取的优惠券列表
    // 注意：这里应该调用获取可领取优惠券的API，但目前API中没有直接提供
    // 暂时使用模拟数据，实际项目中应该替换为真实API调用
    
    // 模拟数据
    setTimeout(() => {
      couponList.value = [
        {
          id: '101',
          name: '新人专享券',
          amount: '15',
          minAmount: '100',
          scope: '全场通用',
          categoryId: '',
          validTimeDesc: '2023-06-01 ~ 2023-07-01',
          status: 'unused',
          received: false
        },
        {
          id: '102',
          name: '满减优惠券',
          amount: '30',
          minAmount: '200',
          scope: '全场通用',
          categoryId: '',
          validTimeDesc: '2023-06-01 ~ 2023-07-01',
          status: 'unused',
          received: false
        },
        {
          id: '103',
          name: '数码专享券',
          amount: '50',
          minAmount: '300',
          scope: '数码专区',
          categoryId: '1',
          validTimeDesc: '2023-06-01 ~ 2023-07-01',
          status: 'unused',
          received: false
        },
        {
          id: '104',
          name: '服装专享券',
          amount: '20',
          minAmount: '150',
          scope: '服装专区',
          categoryId: '2',
          validTimeDesc: '2023-06-01 ~ 2023-07-01',
          status: 'unused',
          received: false
        },
        {
          id: '105',
          name: '家电专享券',
          amount: '100',
          minAmount: '1000',
          scope: '家电专区',
          categoryId: '3',
          validTimeDesc: '2023-06-01 ~ 2023-07-01',
          status: 'unused',
          received: false
        }
      ]
      setLoading(false)
    }, 1000)
    
  } catch (error) {
    console.error('获取优惠券列表失败', error)
    Taro.showToast({
      title: '获取优惠券列表失败',
      icon: 'none'
    })
  } finally {
    hideLoading()
  }
}

// 领取优惠券
const receiveCoupon = async (coupon: CouponItem & { received?: boolean }) => {
  if (coupon.received) {
    Taro.showToast({
      title: '您已领取过该优惠券',
      icon: 'none'
    })
    return
  }
  
  try {
    receivingCouponId.value = coupon.id
    
    // 调用API领取优惠券
    // 注意：这里应该调用领取优惠券的API，但目前API中没有直接提供
    // 暂时使用模拟数据，实际项目中应该替换为真实API调用
    
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 更新优惠券状态
    const index = couponList.value.findIndex(item => item.id === coupon.id)
    if (index !== -1) {
      couponList.value[index].received = true
    }
    
    Taro.showToast({
      title: '领取成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('领取优惠券失败', error)
    Taro.showToast({
      title: '领取失败，请稍后再试',
      icon: 'none'
    })
  } finally {
    receivingCouponId.value = ''
  }
}

// 去购物
const goShopping = () => {
  Taro.switchTab({
    url: '/pages/index/index'
  })
}

// 查看我的优惠券
const goToCouponList = () => {
  Taro.navigateTo({
    url: '/pages/coupon/index'
  })
}

// 组件挂载时初始化
onMounted(() => {
  getCouponList()
})
</script>

<style lang="scss" scoped>
.coupon-center {
  padding-bottom: 20px;
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .coupon-content {
    padding: 10px;
    
    .coupon-list {
      .coupon-item {
        position: relative;
        display: flex;
        margin-bottom: 15px;
        height: 100px;
        background: linear-gradient(to right, #ff9500, #ff6000);
        border-radius: 8px;
        color: #fff;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(255, 149, 0, 0.2);
        
        .coupon-left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 120px;
          border-right: 1px dashed rgba(255, 255, 255, 0.3);
          
          .coupon-amount {
            display: flex;
            align-items: baseline;
            
            .symbol {
              font-size: 16px;
              margin-right: 2px;
            }
            
            .value {
              font-size: 30px;
              font-weight: bold;
            }
          }
          
          .coupon-condition {
            font-size: 12px;
            margin-top: 5px;
          }
        }
        
        .coupon-right {
          flex: 1;
          padding: 15px;
          position: relative;
          
          .coupon-name {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 180px;
          }
          
          .coupon-scope {
            font-size: 12px;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 180px;
          }
          
          .coupon-time {
            font-size: 12px;
            opacity: 0.8;
          }
          
          .coupon-btn {
            position: absolute;
            right: 15px;
            bottom: 15px;
            
            .nut-button {
              &--disabled {
                opacity: 0.6;
              }
            }
          }
        }
        
        .coupon-circle-top,
        .coupon-circle-bottom {
          position: absolute;
          left: 110px;
          width: 20px;
          height: 20px;
          background-color: #f5f5f5;
          border-radius: 50%;
        }
        
        .coupon-circle-top {
          top: -10px;
        }
        
        .coupon-circle-bottom {
          bottom: -10px;
        }
      }
    }
  }
  
  .coupon-rules {
    margin: 20px 10px;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    
    .rules-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 10px;
      color: #333;
    }
    
    .rules-content {
      .rule-item {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin-bottom: 5px;
      }
    }
  }
  
  :deep(.nut-empty) {
    padding: 40px 0;
  }
}
</style>